<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <style>
        .el-input {
            width: 340px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-top: 15px;">
        <el-input placeholder="请输入订单编号" v-model="orderId" class="input-with-select el-input">
            <el-button @click="searchOrder" slot="append" icon="el-icon-search"></el-button>
        </el-input>
    </div>

    <el-button @click="generate">生成激光码</el-button>
    <el-button @click="removeBranch">批量删除</el-button>

    <template>
        <el-dialog title="生成激光码" style="width: 100%" width="70%" height="70%" :visible.sync="dialogVisible" @close="closeDialog">
            <template>
                <el-table
                        ref="singleTable"
                        :data="lasers"
                        highlight-current-row
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="lNo"
                            label="订单编号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            property="lCode"
                            label="组码"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            :formatter="this.timeStamp"
                            label="只码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            :formatter="this.timeStamp"
                            label="只码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            :formatter="this.timeStamp"
                            label="只码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            :formatter="this.timeStamp"
                            label="只码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            :formatter="this.timeStamp"
                            label="只码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            :formatter="this.timeStamp"
                            label="只码"
                            width="200">
                    </el-table-column>
                </el-table>
            </template>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close">确 定</el-button>
            </div>
        </el-dialog>
    </template>


    <el-table
            ref="multipleTable"
            :data="orders"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleOrderChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                prop="orderId"
                label="订单编号"
                width="120">
        </el-table-column>
        <el-table-column
                prop="pName"
                label="产品名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="money"
                label="交易金额"
                width="120">
        </el-table-column>
        <el-table-column
                :formatter="this.formatData"
                prop="dealTime"
                label="交易日期"
                width="200">
        </el-table-column>
        <el-table-column
                prop="orderType"
                label="所属分类"
                width="120">
        </el-table-column>
        <el-table-column
                prop="number"
                label="数量"
                width="120">
        </el-table-column>
        <el-table-column
                prop="laserCode"
                :formatter="stateFormat"
                label="激光码"
                width="120">
        </el-table-column>
        <el-table-column
                label="操作"
                width="120">
            <template slot-scope="scope">
                <el-button
                        v-if="scope.row.laserCode=='1'?'disabled':''"
                        @click.native.prevent="distribute(scope.$index, scope.row)"
                        type="text"
                        size="small">
                    分配打印
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[2, 3, 4,5]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>


</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                orderId: '[[${orderId}]]',
                orders: [],
                lasers: [],
                current: 1,
                pageSize: 2,
                total: 0,
                dialogVisible: false,
                currentOrder: [],
            }
        },
        methods: {
            formatData(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if(data == null) {
                    return null
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
            stateFormat(row, column) {
                if (row.laserCode == '1') {
                    return '已生产'
                } else  {
                    return '未生产'
                }
            },
            showOrderType(val) {
                this.orderType = val;
                console.log("当前状态" + this.orderType);
            },
            generate() {
                if (this.currentOrder.length==0){
                    alert("请先选中一个订单");
                    return;
                }else {
                    //获取所有要生成激光码的订单号
                    this.dialogVisible = true;
                    let arr = new Array();
                    for (let i=0;i < this.currentOrder.length;i++){
                        arr.push(this.currentOrder[i].orderId)
                    }
                    console.log(arr);
                    //给订单生成激光码
                    axios.post("/produce/laser",Qs.stringify({orderIds:arr},{ indices: false }))
                        .then(res=>{
                            this.lasers=res.data;
                            this.handleCurrentChange(this.current, this.pageSize);
                        })
                }
            },
            removeBranch(){
                if (this.currentOrder.length==0){
                    alert("请先选中订单");
                    return;
                }else {
                    let arr = new Array();
                    this.currentOrder.forEach(delId => arr.push(delId.orderId))
                    console.log(arr);
                    axios.delete("/produce/laser?delId=" + arr)
                    .then(res=>{
                        if (res.data=="ok"){
                            this.handleCurrentChange(this.current, this.pageSize);
                        }
                    })
                }
            },
            timeStamp() {
                return parseInt(new Date().getTime()) + '';
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
            },
            handleOrderChange(row){
                //选中某一行
                this.currentOrder=row;
                console.log(this.currentOrder);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                axios.get("/produce/orders?current=" + val + "&pageSize=" + this.pageSize)
                    .then(res => {
                        this.orders = res.data.records;
                        this.current = res.data.current;
                        this.total = res.data.total;
                        console.log(this.orders);
                    })
            },
            searchOrder() {
                console.log(this.orderId);
                console.log(this.orderType);
                axios.get("/produce/order?orderId=" + this.orderId)
                    .then(res => {
                        if (res.data.records == null) {
                            this.orders = res.data;
                        } else {
                            this.orders = res.data.records;
                            this.current = res.data.current;
                            this.total = res.data.total;
                        }
                    })
            },
            distribute(index, data) {
                location.href="/page/toPrint/assignment.html?orderId="+data.orderId;
            },
            close(){
                this.currentOrder=[];
                this.dialogVisible=false;
            },
            btnType(row){
                console.log(row);
            }
        },
        mounted() {
            this.handleCurrentChange(1, this.pageSize);
        }
    })
</script>
</html>